<template>
    <div class="home_index">
 		<header>
    		<span class="left"></span>
    		<span class="center">泡百科</span>
    		<router-link to='/my'><span class="right"><img src="../../static/img/logo.png"/></span></router-link>
    	</header>
    	
    	<section>
    		<div class="banner">
            <div class="swiper-container imgs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <router-link to='/baiketwo'><img src="../../static/img/index.png" style="width:100%;height:100%" /></router-link>
                    </div>
                    <div class="swiper-slide">
                        <router-link to='/baiketwo'><img src="../../static/img/index.png" style="width:100%;height:100%" /></router-link>
                    </div>
                    <div class="swiper-slide">
                        <router-link to='/baiketwo'><img src="../../static/img/index.png" style="width:100%;height:100%" /></router-link>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-scrollbar"></div>
                </div>
            </div>
    	</section>
    	
    	<section class="jiesao">
    		<div>
	    		<dl v-for='item in imges'>
	    		<router-link :to='item.path' tag='dt'><img :src="item.img"/></router-link>
	    			<dd>
	    				<h2>{{item.title}}</h2>
	    				<p>{{item.describe}}</p>
	    				<p>{{item.data}}</p>
	    			</dd>
	    		</dl>
    		</div>
 
    	</section>	
 </div>	
</template>
		
<script>
import axios from 'axios'
	export default {
		name:'home_index',
  data () {
  	return {
		imges:[]
	   
     }
  },
  mounted () {
  var myswiper = new Swiper('.swiper-container', {
              autoplay: 1000,
              pagination: '.swiper-pagination'       
        });
    axios.get('../../static/json/homeIndex.json')
	   .then(response => {
		this.imges = response.data
		console.log(this.imges)
	}) 
          
 }
}
</script>
    	
    	<style scoped lang="less">
    		@import '.././assets/less/header.less';
    		@import '.././assets/css/swiper.min.css';
    		@import '.././assets/less/homeIndex.less';
    		
    	.active{
            background: #42B983;
            color: white!important;
            padding: 13px 40px;
        }
    	</style>
    	
   
    
